<template>
  <div class="infinite-container">
    <div class="mg10 bgwhite re">
      <div class="left-circle"></div>
      <div class="right-circle"></div>
      <div class="barcode">
        <barcode :value="order.patientMedicalCardNumber" style="width:100%;height:100px;" :options="{ displayValue: false }"></barcode>
        <div class="bordered" style="padding:0 1em 12px;">
          {{order.patientName}} {{order.patientSex | getSex}} {{order.patientAge}}岁
          <span class="fr">NO: {{order.patientMedicalCardNumber}}</span>
        </div>
      </div>
      <div class="detail pd20 re">
        <!-- <div class="unpayed"></div> -->
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">挂号科室</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{order.departmentName}}</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">挂号医生</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{order.doctorName}}</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">就诊日期</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{order.scheduleDate}}</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">就诊时间</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{order.beginTime | getHourMinites}} - {{order.endTime| getHourMinites }}</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">就诊序号</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{order.serialNumber}}号</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">就诊地点</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{order.departmentLocation || '门诊1楼'}}</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">挂号费用</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{order.regFee | fixedMoney}}</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">账户余额</mu-flexbox-item>
          <mu-flexbox-item class="text-right">{{accountBalance | fixedMoney}}</mu-flexbox-item>
        </mu-flexbox>
        <mu-flexbox class="mb10">
          <mu-flexbox-item class="t3">支付状态</mu-flexbox-item>
          <mu-flexbox-item class="text-right" :class="{t5: order.payStatus === 1}">{{PAYED_STATUS_ORDER[order.payStatus || 0]}}</mu-flexbox-item>
        </mu-flexbox>
      </div>

    </div>
    <section v-show="hasTip">
      <div class="t5 pd20">
        提示：账户余额不足，为避免影响正常就诊，建议尽快进行账户充值。
      </div>
      <mu-flexbox :gutter="0" class="pd40">
        <mu-flexbox-item>
          <mu-raised-button class="submit-btn" label="去充值" to="/inpatient-care/prePayHand?" fullWidth primary></mu-raised-button>
        </mu-flexbox-item>
      </mu-flexbox>
    </section>
  <div class="fixed-bottom pd10 text-center t3">取号时间：{{order.commitTime}}</div>
  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
import barcode from '@xkeshi/vue-barcode'
import {PAYED_STATUS_ORDER} from '@/api/const'
export default {
  components: {barcode},
  data () {
    return {
      order: {},
      accountBalance: 0,
      PAYED_STATUS_ORDER: PAYED_STATUS_ORDER,
      hasTip: false
    }
  },
  computed: {
    hasTip () {
      return this.accountBalance < this.order.regFee
    }
  },
  mounted () {
    this.getRegistrationForm()
  },
  methods: {
    getRegistrationForm () {
      let params = {
        hisOrderNumber: this.$route.query.hisOrderNumber,
        invoiceNumber: this.$route.query.invoiceNumber
      }
      commonAjax(RESTFUL_API.getRegistrationForm, params, true).then(res => {
          if (res.data.code == 200) {
          this.order = res.data.data
          this.queryAccount(res.data.data.patientCode)
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.message})
        }
      })
    },
    queryAccount (patientCode) {
      commonAjax(`${RESTFUL_API.unpaidAmount}`, {patientCode}, true).then(res => {
        if (res.data.code == 200) {
          this.accountBalance = res.data.data.accountBalance
        }
      })
    }
  }
}
</script>

<style scoped>
.bordered {
  border-bottom: dashed 1px #f5f5f5;
}
.left-circle, .right-circle{
  background: #f2f2f2;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: -0.5em;
  top: 130px;
}
.right-circle{
  left: auto;
  right: -0.5em;
}
.unpayed {
  position: absolute;
  top: 40px;
  right: 20px;
  background: url(../../assets/images/icon_ghd_wzf.png) no-repeat;
  width: 67px;
  height: 67px;
  background-size: 67px;
}
</style>
